<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
        }
        
        h3 {
            border-bottom: 1px solid #ccc;
        }
        
        textarea {
            width: 594px;
            height: 300px;
        }
        
        button {
            width: 600px;
            height: 50px;
        }
        
        .doc {
            border: 1px solid orange;
            min-height: 100px;
            margin-bottom: 10px;
        }
        
        .item {
            clear: both;
            box-sizing: border-box;
            width: 100%;
            line-height: 40px;
            text-indent: 10px;
            color: #000;
            font-size: 12px;
            min-height: 40px;
            border: 1px solid #ccc;
            border-bottom: 0;
            border-bottom: 1px dotted skyblue;
        }
        
        .delete_btn {
            float: right;
            z-index: 10;
            display: block;
            margin-top: 2px;
            /* text-indent: 12px; */
            margin-right: 120px;
            line-height: 30px;
            width: 50px;
            height: 30px;
            /* color: #000; */
            outline: 2px solid #000;
            cursor: pointer;
            border: 1px solid lightyellow;
        }
        
        .count {
            font-size: 12px;
            border: 1px solid red;
            font-weight: bold;
            color: #000;
        }
        
        button:hover {
            background: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>留言内容：</h3>
        <div class="doc"></div>
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
        <button class="btn">发表留言</button>
    </div>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function() {
            //需求：留言板

            //统计留言次数
            var num = 0;
            //2.给按钮绑定事件
            $(".btn").click(function() {
                //3.获取留言内容
                var text_info = $('textarea').val();
                num++;
                // 4.创建元素，将内容放进去
                let oP = document.createElement("p");
                // <p class=\"item\">" + "<span class=\".count\">" + "第" + (index + 1) + "次留言：</span>" + text + "<span class=\"delete_btn\">删除<span></p>";
                oP.innerHTML = `<p class="item"> <span class="count">第${num}层楼：</span> ${text_info}<button class="delete_btn">删除</button></p>`
                    //5.将 创建的节点 添加到 doc
                $(".doc").append(oP);
                // console.log($(".item")[0],num);
                $(".item").eq(num - 1).css("color", random_color(6));
                // 给删除按钮的父级点击点击事件
                $(".item").click(function(ev) { //   事件委托
                        ev = ev || window.event;
                        // 判断点击的节点名类名是否删除按钮的类名 (最不要用节点名去判断)因为以后扩展可能会添加多个功能按钮
                        if (ev.target.className == "delete_btn") {
                            // 删除留言
                            this.parentNode.remove(this);
                        }

                    })
                    // 清空 文本框
                $('textarea').val("");
                $('textarea').focus();


            })


            function random_color(n) {
                let color_arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
                let arr = [];
                for (let i = 0; i < n; i++) {
                    let random = Math.floor(Math.random() * 15);
                    arr.push(color_arr[random]);
                }
                let sum = "#";
                for (let i = 0; i < arr.length; i++) {
                    sum += arr[i];
                }
                return sum;
            }


        })
    </script>
</body>

</html>